<template>
     <div class="mian-comment">
         <div class="row">
             <div class="info">
                <div class="user">
                    <img v-if="mainCommentItem.user.head_img" :src="mainCommentItem.user.head_img | fixImgUrl" alt="">
                    <img v-else src="../../assets/user1.jpg" alt="">
                </div>
                <div class="author-info">
                    <div class="author">{{mainCommentItem.user.nickname}}</div>
                    <div class="date">{{mainCommentItem.create_date ? mainCommentItem.create_date.split('T')[0]:''}}</div>
                </div>
            </div>
            <div class="reply" @click="callReply">回复</div>
         </div>
         <div class="borderWapper" v-if="mainCommentItem.parent">
             <!-- 这里parentCallReply事件由递归的子组件调用传出父级数据 -->
            <ParentComment :commentData="mainCommentItem.parent" v-if="mainCommentItem.parent"
            :parentDepth="parentDepth" @parentCallReply="parentCallReply"></ParentComment>
         </div>
         <div class="content">{{mainCommentItem.content}}</div>
     </div>
</template>

<script>
import ParentComment from '../comment/ParentComment'
export default {
    props:['mainCommentItem'],
    components:{
        ParentComment
    },
    computed:{
        // 记录递归深度（即父级有多少层）
        parentDepth(){
            let depth = 0;
            let current = this.mainCommentItem;
            while(current.parent){
                depth+=1;
                current = current.parent;
            }
            return depth;
        }
    },
    methods:{
        // 这是主评论的回复事件
        // 主评论由于不参与递归，单独对待
        //以下两个方法分别都去触发文章详情的parentCallReply的事件
        callReply(){
            this.$emit('parentCallReply',{
                id:this.mainCommentItem.id,
                nickname:this.mainCommentItem.user.nickname
            })
        },
        parentCallReply(parentInfo){
            // 这里是父级传给文章详情页面（所有父级单独传）
            this.$emit('parentCallReply',parentInfo)
        }
    }
}
</script>

<style lang="less" scoped>
.mian-comment{
    padding: 0 6.111vw;
    border-bottom: 1px solid #E4E4E4;
    .row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:4.444vw 0 3.889vw 0;
        //padding-top: 4.444vw;
        .info{
            display: flex;
            justify-content: space-between;
            .user{
                width: 9.722vw;
                height: 9.722vw;
                img{
                    width: 9.722vw;
                    height: 9.722vw;
                    border-radius: 50%;
                }
            }
            .author-info{
                margin-left: 2.222vw;
                .author{
                    font-size: 3.889vw;
                    color: #212121;
                }
                .date{
                    font-size: 3.333vw;
                    color: #707070;
                }
            }
        }
        .reply{
            font-size: 3.333vw;
            color: #707070;
        }
    }
    .borderWapper{
        border-bottom:1px solid #D7D7D7;
    }
    .content{
        padding:4.444vw 0;
        font-size: 3.889vw;
        color: #212121;
    }
}
</style>